<template>
  <div v-finger:swipe="swipeHandler" 
       v-finger:pinch="pinchHandler"
       v-finger:rotate="rotateHandler"
  > 
    <transition name="fade" >
      <div v-if="currentValue"  class="rain-popup-bg" @click="hideVisible"></div>
    </transition>
    <input type="text" v-model="currentValue" style="display:none" >
    <!-- txt-show -->
    <div v-if="currentValue" class="rain-popup-head">
      <div></div>
      <div class="txt" >{{listIndex+1}}/{{maxIndex+1}}</div>
      <div class="close" ><img src="../assets/close.png" @click="hideVisible" ></div>
    </div>
    <!-- img-show -->
    <div v-if="currentValue" class="rain-popup"  >
       <img :src="list[listIndex]" ref="previewImg" alt="vue图片预览" >
    </div>  
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"

@Component({
  components: {}
})
export default class Home extends Vue {
  // data
  listIndex = 0
  maxIndex = 0
  zoomValue:any = 0
  zoomIndex = 0
  // props
  @Prop(Array) list!:any 
  @Prop(Boolean) value!:boolean 
  //data
  currentValue = this.value

  // watch
  @Watch('currentValue')
  getCurrentValue(val:any) {
    this.$emit('input',val)
  }
  @Watch('value')
  getShowVisible(val:any){
    this.currentValue = val
  }
  // method
  hideVisible(){
    this.currentValue = false
  }
  // 旋转手势
  rotateHandler(e:any){
   console.log('旋转',e.angle);
   (this.$refs.previewImg as any).style.transform = "rotate("+e.angle*100+"deg)"
  }
  // 缩放手势
  pinchHandler(e:any):void { 
    this.zoomValue = e.zoom-1;
    (this.$refs.previewImg as any).style.width = 100*(e.zoom)+'%';
    console.log('onPinch'); 
    console.log(e);
  }
  // 滑动手势
  swipeHandler(e:any){
    console.log(e)
    switch(e.direction){
      case 'Left':
        if(this.listIndex>=this.maxIndex){
          this.listIndex = 0
        }else{
          this.listIndex = this.listIndex+1
        }
      break;
      case 'Right':
        if(this.listIndex==0){
          this.listIndex = this.maxIndex
        }else{
          this.listIndex = this.listIndex-1
        }
      break;
      default:
      break;
    }
  }
  mounted() {
   this.maxIndex = (this.list).length-1 
  }
}
</script>
<style lang="scss" scoped>
@import "../scss/imagePreview.scss";
.a{
  transform: rotate();
}
</style>
